<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>bind</title>
</head>

<body>
    <label for="inp">双向绑定</label>
    <input type="text" id="inp" value='hah'></input>
    <p id="txt">默认值</p>
    <script>
        let inp = document.getElementById("inp")
        let txt = document.getElementById("txt")
        let obj = {}
        Object.defineProperty(obj,'name',{
            get(){
                console.log('get');
                return
            },
            set(newValue,oldValue){
                console.log('set');
                console.log(newValue);
                console.log(oldValue);
                console.log('set');
                txt.innerText = newValue
            }
        })

        // inp.addEventListener('change',function(e){
        inp.addEventListener('input',function(e){
            let value = e.target.value
            console.log(value);
            obj.name = value

            // txt.innerHTML = value
        })

    </script>
</body>

</html>